
<template>
    <template v-for="(menu, index) in menuList">
      <el-sub-menu
        v-if="menu.children && menu.children.length >= 1 && !menu.hide"
        :index="menu.path + index"
        :key="menu.path + index"
      >
        <template #title>
          <el-icon class="el-icon">
            <component :is="menu.icon" />
          </el-icon>
          <span>{{
            $t(`index.${menu.title}`).indexOf('index.') === -1
              ? $t(`index.${menu.title}`)
              : menu.title
          }}</span>
        </template>
        <main-menu-item :menuList="menu.children"></main-menu-item>
      </el-sub-menu>
      <el-menu-item
        v-else-if="!menu.hide"
        :index="menu.name + ''"
        :key="menu.name"
      >
        <el-icon class="el-icon">
          <component :is="menu.icon" />
        </el-icon>
        <span>{{
          $t(`index.${menu.title}`).indexOf('index.') === -1
            ? $t(`index.${menu.title}`)
            : menu.title
        }}</span>
      </el-menu-item>
    </template>
</template>

<script>
export default {
  name: 'MainMenuItem',
  components: {},
  props: {
    menuList: [],
  },
  computed: {},
  data() {
    return {}
  },
  methods: {
    handleClick(path) {
      // this.$router.push(path)
      // this.defaultOpen = path
    },
  },
  created() {},
  mounted() {},
}
</script>

<style lang="less">
.sideBar-wrap {
}
</style>
